import React, { Component } from "react";
import { Flex } from 'antd-mobile';
// 引入withRouter，才能在组件中获取路由信息
import { withRouter } from 'react-router-dom';
import './index.scss'
class App extends Component {
    constructor(props) {
        super(props)
        console.log(props);// 此时props里就具备了路由对象
    }

    render() {
        return (
            // 根据传的props判断用哪个类名
            <Flex className={`search-box ${this.props.className || ''}`} >
                {/* 左侧白色区域 */}
                <Flex className="search">
                    {/* 位置 */}
                    <div className="location" onClick={() => this.props.history.push('/citylist')}>
                        {this.props.cityInfo}
                        <i className="iconfont icon-arrow" />
                    </div>

                    {/* 搜索表单 */}
                    <div className="form" onClick={() => this.props.history.push('/search')}>
                        <i className="iconfont icon-seach" />
                        <span className="text">请输入小区或地址</span>
                    </div>
                </Flex>
                {/* 右侧地图图标 */}
                <i className="iconfont icon-map" onClick={() => this.props.history.push('/Map')} />
            </Flex>
        )
    }
}

export default withRouter(App)